<template>
    <div>
        <m-filter>
            <a-button @click="openRowOperateModal()" type="primary" v-has="'add'">
                <a-icon type="plus"></a-icon>
            </a-button>
        </m-filter>
        <div class="table" style="overflow: hidden">
            <a-table
                rowKey="id"
                :columns="columns"
                :loading="tableLoading"
                :data-source="tableData"
                class="no-pagination-table"
                :scroll="{ y: true }"
                :pagination="false"
            >
                <template slot="operate" slot-scope="text, record">
                    <span class="primary-color" v-has="'auth'" @click="openPermissionModal(record)"></span>
                    <a-divider type="vertical" v-has="'auth:line'" />
                    <span class="primary-color" v-has="'edit'" @click="openRowOperateModal(record)"></span>
                    <a-divider type="vertical" v-has="'edit:line'" />
                    <a-popconfirm
                        v-has="'del'"
                        title="确定删除吗?"
                        ok-text="是"
                        cancel-text="否"
                        @confirm="del(record.id)"
                    >
                        <span class="danger-color"></span>
                    </a-popconfirm>
                </template>
            </a-table>
        </div>
        <promiseModal v-if="isOpenPromiseModal" :isShowModal.sync="isOpenPromiseModal" :currRow="currRow" />
        <operateModal
            v-if="isOpenOperateModal"
            :isShowModal.sync="isOpenOperateModal"
            :currRow="currRow"
            :enterpriseId="currSelectedTreeId"
            @updateData="getTableData"
        />
    </div>
</template>

<script>
import promiseModal from './modal/promise-form'
import operateModal from './modal/index'
import { rolesApi } from '../../../common/api/setting'
import MFilter from '../../../components/filter'

export default {
    name: 'userPermissionAssignment',
    components: {
        promiseModal,
        operateModal,
        MFilter,
    },
    data() {
        return {
            // table
            columns: [
                {
                    title: '角色名称',
                    dataIndex: 'roleName',
                },
                {
                    title: '角色描述',
                    dataIndex: 'description',
                    ellipsis: true,
                },
                {
                    title: '角色类型',
                    dataIndex: 'roleType',
                    ellipsis: true,
                },
                // {
                //     title: '唯一设备登录',
                //     dataIndex: 'isOnlyLogin',
                //     customRender: text => {
                //         return text ? '是' : '否'
                //     },
                // },
                {
                    title: '操作',
                    dataIndex: 'operate',
                    scopedSlots: { customRender: 'operate' },
                    width: 250,
                },
            ],
            tableData: [],
            tableLoading: false,
            currRow: undefined,
            // modal
            isOpenPromiseModal: false,
            isOpenOperateModal: false,
            //enterprise tree
            currSelectedTreeId: '',
        }
    },
    computed: {},
    mounted() {
        this.getTableData()
    },
    methods: {
        async del(id) {
            const res = await rolesApi.del({ id })
            res.code == 200 ? this.$message.success(`删除角色成功`) : this.$message.error(`删除角色失败`)
            this.getTableData()
        },
        openPermissionModal(row) {
            this.currRow = row
            this.isOpenPromiseModal = true
        },
        openRowOperateModal(row) {
            this.currRow = row
            this.isOpenOperateModal = true
        },
        async getTableData() {
            this.tableLoading = true
            const enterpriseId = this.currSelectedTreeId
            let res
            try {
                res = await rolesApi.get({ type: '01', enterpriseId })
                if (res.code == 200) {
                    this.tableData = res.data.list
                }
            } catch (e) {
                console.log(e)
            }
            this.tableLoading = false
        },
    },
}
</script>

<style lang="scss" scoped>
.ant-tree {
    height: 560px;
    overflow-y: auto;
    margin-bottom: 20px;
}
</style>
